What's Redux !? Redux 是一個用來集中管理state的一個library，

用了Redux我們可以直接取得或修改相同的state，不用再一層一層Component往下傳了!

原理

• 透過一個根Component集中管理states(這個地方通常稱為store)
• store裡的states是透過dispatch執行某個action(動作)來進行變化 (一般的states是透過setState來進行變化)
• dispatch在選擇要執行哪一個action的時候，該action會被送到reducer裡去決定到底是dispatch哪個action，進而回傳新的store

重點

• 如果有Component要使用store的話，就必須和store連結
• dispatch action 是回傳新的store，而不是直接改變store內的states

在最上層Component鑲上Redux和其他Component連結store的方式

1. 執行以下指令安裝redux

   npm install redux
   

2. 在App.js的地方鑲上React Redux 的Provider ，且透過redux的createStore來建立store

   import { createStore } from "redux";
   import reducer from './reducers'
   const store = createStore(reducer)
   
   class App extends React.Component {
     render() {
       return (
         <Provider store={store}>
           <Component />
         </Provider>
       );
     }
   }
   

3. 上面的程式碼我們會看到在建立store的時候需要傳入reducer (也就是放置action type 並回傳新store的地方)，所以我們要建立reducer並傳入

   • 開啟一個新的js檔案
   • 設定要傳入reducer的初始states
   • 建立一個function 來決定要回傳哪個action裡的store (第一個參數為初始值的states，第二個參數為傳入的action)
   • 上面有提到說action是用return 的方式去回傳store，而不是直接改變state的值

   let initialState;
   
   initialState = {
      aa:""
   };
   
   const reducer = (state = initialState, action) => {
     switch (action.type) {
       case "action1":
          return {
                   ...state,
                   aa:"123"
               };
         break;
       case "action2":
         return {
                   ...state,
                   aa:"333"
               };
         break;
       default:
         return { ...state };
         break;
     }
   
   };
   

4. 上述程式碼，我們在switch裡使用到action.type，通常我們會建立一個新的js檔案來放置action

   export const action1 = ()=>{
       return {type:'action1'}
   };
   export const action2 = ()=>{
       return {type:'action2'}
   };
   

5. 在其他Component連結store的方式 (連結state和dispatch)

• 連結state

  const mapStateToProps = (state) => {
    return { aa: state.aa };
  };
  

• 連結dispatch

const mapDispatchToProps = (dispatch) => {
  return {
      action1:()=>{dispatch(action1())},
      action2:()=>{dispatch(action2())}
  };
};

以上是Redux的原理及使用方法的補充，

下一篇要來介紹跟Redux作用很像的React Query ，
小菜鳥個人是覺得React Query相對Redux好用滿多的 (⊙ꇴ⊙)